<template>
  <div class="create" style="margin: 20px 0">
    <el-button type="success" @click="createDialogShow=true">
      <el-icon style="margin-right: 8px">
        <Plus/>
      </el-icon>
      新增
    </el-button>
  </div>
  <create-template v-model:dialog-visible="createDialogShow" @submit="loadData"></create-template>
  <update-template v-model:dialog-visible="updateDialogShow" @submit="loadData" :id="updateRowId"></update-template>
  <el-table :data="pageInfo.list" style="width: 100%">
    <el-table-column prop="id" label="编号" width="180"/>
    <el-table-column prop="title" label="模板名称" width="150"/>
    <el-table-column label="封面" width="150">
      <template #default="{row}">
        <el-image style="width: 100px; height: 100px"
                  :preview-src-list="[row.picture]"
                  fit="cover" :src="row.picture"></el-image>
      </template>
    </el-table-column>
    <el-table-column prop="price" label="价格"/>
    <el-table-column prop="createTime" label="创建日期"/>
    <el-table-column prop="updateTime" label="更新日期"/>
    <el-table-column fixed="right" label="操作" width="180">
      <template #default="{row}">
        <el-button type="warning" size="small" @click="handleEdit(row)">
          <el-icon style="margin-right: 8px">
            <Edit/>
          </el-icon>
          编辑
        </el-button>
        <el-button type="danger" size="small" @click="handleDelete(row)">
          <el-icon style="margin-right: 8px">
            <Delete/>
          </el-icon>
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
      v-model:currentPage="searchVO.pageNum"
      :page-size="searchVO.pageSize"
      :page-sizes="[10, 20, 30, 40]"
      layout="total, sizes, prev, pager, next, jumper"
      @current-change="loadData"
      @size-change="handleSizeChange"
      :total="pageInfo.total"
  >
  </el-pagination>
</template>
<script lang="ts">
import {defineComponent} from "vue";
import {SearchVO, Template, User} from "@/typings";
import {ElMessage, ElMessageBox} from "element-plus";
import {deleteTemplate, listTemplate} from "@/api/post/template";
import CreateTemplate from "@/components/post/template/create-template.vue";
import UpdateTemplate from "@/components/post/template/update-template.vue";

export default defineComponent({
  components: {UpdateTemplate, CreateTemplate},
  data() {
    return {
      pageInfo: {
        list: [],
        pages: 1
      },
      searchVO: {
        keyword: '',
        pageNum: 1,
        pageSize: 10,
      } as SearchVO,
      createDialogShow: false,
      updateDialogShow: false,
      updateRowId: '0',
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    handleDelete(row: Template) {
      ElMessageBox.confirm("是否确认要删除该记录", 'warning',
          {confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning'})
          .then(() => {
            deleteTemplate(row.id).then(res => {
              if (res == true) {
                ElMessage.success({message: '删除成功'});
                this.loadData()
              }
            })
          })
    },
    handleEdit(row: Template) {
      this.updateRowId = row.id
      this.updateDialogShow = true
    },
    loadData() {
      listTemplate(this.searchVO).then(res => {
        this.pageInfo = res
      })
    },
    handleQuery() {
      this.searchVO.pageNum = 1
      this.loadData()
    },
    handleSizeChange(val: number) {
      this.searchVO.pageSize = val
    },
    resetQuery() {
      this.searchVO = {
        userId: undefined,
        type: undefined,
        startTime: undefined,
        endTime: undefined,
        timeRange: undefined,
        keyword: undefined,
        pageNum: 1,
        pageSize: 10
      }
    },
  }
})
</script>
<style lang="scss" scoped>

</style>